<template>
  <div class="main">
    <el-dialog :visible.sync="mapDisplay" width="58%">
      <div style="width:100%;height:450px">
        <MapContainer></MapContainer>
      </div>
    </el-dialog>
    <el-dialog title="修改信息" :visible.sync="oneDialogVisible" width="50%">
      <el-form :model="updateInfo" ref="myinfo" :rules="rule" label-width="80px">
        <el-form-item label="校名" prop="s_realName">
          <el-input v-model="updateInfo.s_realName"></el-input>
        </el-form-item>
        <el-form-item label="电子邮箱">
          <el-input v-model="updateInfo.s_email"></el-input>
        </el-form-item>
        <el-form-item label="手机号码" prop="s_phone">
          <el-input v-model="updateInfo.s_phone"></el-input>
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model="updateInfo.s_addr"></el-input>
          <el-button
            style="font-size:13px"
            size="mini"
            type="primary"
            @click="choseAddr"
            icon="el-icon-position"
          ></el-button>
        </el-form-item>
        <el-form-item label="学校简介">
          <el-input type="textarea" v-model="updateInfo.s_introduction"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button size="mini" style="background:green;color:#fff" @click="sendOk">提交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog title="修改密码" :visible.sync="twoDialogVisible" width="38%">
      <el-form :rules="rule" :model="info" ref="mypassword" label-width="80px">
        <el-form-item label="用户名">
          <el-input disabled v-model="info.s_username"></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="s_password">
          <el-input v-model="info.s_password"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="sendFor">提交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- //提供材料 -->
    <el-dialog title="上传材料" :visible.sync="evidenceShow" width="50%">
      <el-upload
        ref="getEvidence"
        class="upload-demo"
        :auto-upload="false"
        :data="eviInfo"
        :on-preview="handlePreview"
        :on-change="getList"
        :on-success="upSuccess"
        :on-remove="handleRemove"
        :action="evUrl+'zj/nowEvidence'"
        :file-list="fileList"
        list-type="picture"
      >
        <el-button size="small" type="primary">选择图片</el-button>
        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
      </el-upload>
      <el-button style="margin-top:18px" size="small" @click="sendEvidence" type="primary">提交</el-button>
    </el-dialog>
    <el-descriptions title="基础信息" direction="vertical" :column="5" border>
      <el-descriptions-item label="用户名">{{info.s_username}}</el-descriptions-item>
      <el-descriptions-item label="校名">{{info.s_realName}}</el-descriptions-item>
      <el-descriptions-item label="手机号码">{{info.s_phone? info.s_phone:'暂无数据'}}</el-descriptions-item>
      <el-descriptions-item label="电子邮箱">{{info.s_email? info.s_email:'暂无数据'}}</el-descriptions-item>
      <el-descriptions-item label="备注">
        <el-tag size="small">学校</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="联系地址" :span="2">{{info.s_addr? info.s_addr:'暂无数据'}}</el-descriptions-item>
      <el-descriptions-item
        label="学校简介"
        :span="2"
      >{{info.s_introduction? info.s_introduction:'暂无数据'}}</el-descriptions-item>
      <el-descriptions-item label="操作" :span="2">
        <el-tooltip content="修改信息" placement="top">
          <el-button @click="changeInfo" type="primary" icon="el-icon-edit"></el-button>
        </el-tooltip>
        <el-tooltip content="修改密码" placement="top">
          <el-button @click="changePassword" type="primary" icon="el-icon-setting"></el-button>
        </el-tooltip>
      </el-descriptions-item>
      <el-descriptions-item label="头像">
        <img
          style="width:128px;height:128px"
          :src="evUrl+(imgVal || mgsSrc||'56b731c4732fab16e2558f9237d04e60.png')"
          alt
        />
      </el-descriptions-item>
      <el-descriptions-item label="认证">
        <el-tag
          style="margin-right:5px"
          v-if="!info.e_status || (info.e_status==1)"
          size="small"
        >未认证</el-tag>
        <el-tag style="margin-right:5px" v-if="info.e_status==2" size="small">认证通过</el-tag>
        <el-button
          v-if="!info.e_check || (info.e_check==1)"
          type="primary"
          size="mini"
          @click="giveEvidence"
        >提交相关材料</el-button>
        <el-button v-if="info.e_check==2" type="info" size="mini" disabled>处理中</el-button>
        <el-button v-if="info.e_check==4" type="warning" size="mini" @click="againEvidence">未通过，重新提交</el-button>
      </el-descriptions-item>
      <el-descriptions-item v-if="info.e_reson">
        <el-result icon="info" :subTitle="info.e_reson"></el-result>
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>
<script>
import { getSchoolDetails, changeMyInfo } from "../api/index.js";
import { upYouPass, beforeEvidence } from "../api/info.js";
import MapContainer from "../components/MapContainer";

export default {
  components: { MapContainer },
  data() {
    return {
      evUrl: this.$evUrl,
      info: {},
      updateInfo: {},
      mgsSrc: "",
      imgVal: "",
      eviInfo: {
        sId: ""
      },
      dealCount: 0,
      oneDialogVisible: false,
      twoDialogVisible: false,
      evidenceShow: false,
      mapDisplay: false,
      evidenceList: 0,
      fileList: [],
      rule: {
        s_realName: [
          { required: true, message: "请输入学校名称", trigger: "blur" },
          { min: 4, max: 10, message: "长度在 4 到 10 个字符", trigger: "blur" }
        ],
        s_phone: [
          { required: true, message: "请输入手机号码", trigger: "blur" },
          {
            min: 11,
            max: 11,
            message: "长度在 11 到 11 个字符",
            trigger: "blur"
          }
        ],
        s_password: [
          { required: true, message: "请输入新密码", trigger: "blur" },
          { min: 3, max: 18, message: "长度在 3 到 18 个字符", trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    // 选择地址
    choseAddr() {
      this.mapDisplay = true;
    },
    getSchoolD() {
      const sId = window.localStorage.getItem("id");
      getSchoolDetails({ sId: sId }).then(({ data }) => {
        this.info = { ...data.info, s_password: "" };
        this.updateInfo = JSON.parse(JSON.stringify(this.info));
        // console.log(data.info)
      });
      // console.log(sId)
    },
    // 修改信息
    changeInfo() {
      // console.log(this.updateInfo)
      // console.log('11111', this.info)
      this.oneDialogVisible = true;
    },
    // 提交修改
    sendOk() {
      this.$refs.myinfo.validate(valid => {
        if (valid) {
          // console.log('good')
          changeMyInfo(this.updateInfo).then(({ data }) => {
            this.$message.info(data.message);
            this.getSchoolD();
          });
          this.oneDialogVisible = false;
        } else {
          this.$message.info("请正确填写表单");
        }
      });
    },
    // 修改密码
    changePassword() {
      // console.log('22222')
      this.twoDialogVisible = true;
    },
    // 提交密码修改
    sendFor() {
      this.$refs.mypassword.validate(valid => {
        if (valid) {
          // console.log('goodday')
          upYouPass({
            role: "2",
            password: this.info.s_password,
            username: this.info.s_username
          }).then(({ data }) => {
            // console.log(data)
            this.$message.info(data.message);
          });
          this.twoDialogVisible = false;
          this.info.s_password = "";
        } else {
          this.$message.info("请正确填写表单");
        }
      });
    },
    // 提交材料认证
    giveEvidence() {
      this.evidenceShow = true;
    },
    // 移除文件时
    handleRemove(file, fileList) {
      // console.log('移除文件时', file, fileList)
      this.fileList = fileList;
    },
    // 点击文件时
    handlePreview(file) {
      // console.log('上传文件时', file)
    },
    // 选择文件时
    getList(file, fileList) {
      // console.log('选择文件时', file)
      // console.log('选择文件时', fileList)
      this.fileList = fileList;
    },
    // 上传成功时
    upSuccess() {
      this.dealCount--;
      if (this.dealCount === 0) {
        this.$refs.getEvidence.clearFiles();
        this.evidenceShow = false;
        this.info.e_check = "2";
      }
    },
    // 文件上传
    sendEvidence() {
      this.dealCount = this.fileList.length;
      if (this.fileList.length === 0) {
        return this.$message.error("请选择材料图片");
      }
      const sId = window.localStorage.getItem("id");
      this.eviInfo.sId = sId;
      beforeEvidence({ s_id: sId }).then(({ data }) => {
        // console.log(data)
        if (data) {
          this.$refs.getEvidence.submit();
        }
      });
    },
    // 重新提交
    againEvidence() {
      this.giveEvidence();
    }
  },
  // 监听vuex数据变化
  watch: {
    "$store.state.tab.userImage"(newVal, oldVal) {
      // 对数据执行操作
      // console.log(newVal, oldVal)
      this.imgVal = newVal;
    },
    "$store.state.tab.our_addr"(newVal, oldVal) {
      // 对数据执行操作
      // console.log(newVal, oldVal)
      this.updateInfo.s_addr = newVal.address;
      this.mapDisplay = false;
    }
  },
  mounted() {
    this.getSchoolD();
    this.mgsSrc = window.localStorage.getItem("imageSrc");
    // this.info = JSON.parse(window.localStorage.getItem('userInfo'))
  }
};
</script>
<style scoped>
</style>
